<template>
     <div class="box">
        <header class="header">
           <div class="top">
             <div class="left">
                <!--点击分类图标，跳转到分类页面--> 
                 <p><van-icon name="apps-o" size="25" class="icon" @click="$router.push('/kind')"/></p>
                 <p class="text">分类</p>
             </div>
             
               <p><img src="../../img/1.jpg" alt="" class="img"></p>

                <div class="left">
                    <!--点击登录图标，跳转到登录页面--> 
                 <p><van-icon name="manager-o" size="25" class="icon" @click="$router.push('/login')"/></p>
                 <p class="text">登录</p>
             </div>
           </div>

            <!--搜索组件-->  <!--点击搜索，跳转到搜索页面--> 
            <van-search v-model="value" placeholder="Apple新品上市" class="search" @click-input="$router.push('/search')"/>
        </header>
        <main class="content">
            <div class="grid">
                <!--宫格组件-->
                    <van-grid>
  <van-grid-item :icon="require('../../img/2.jpg')" text="苏宁家电" />
  <van-grid-item :icon="require('../../img/3.jpg')" text="苏宁超市" />
  <van-grid-item :icon="require('../../img/4.jpg')" text="手机电脑" />
  <van-grid-item :icon="require('../../img/5.jpg')" text="家具家装" />
  <van-grid-item :icon="require('../../img/6.jpg')" text="生活家电" />
  <van-grid-item :icon="require('../../img/2.jpg')" text="Super会员" />
  <van-grid-item :icon="require('../../img/3.jpg')" text="优选空调" />
  <van-grid-item :icon="require('../../img/4.jpg')" text="签到有礼" />
</van-grid>
            </div>
           <pro-list/>
        </main>
       
       </div>
</template>


<script setup>
//引入列表
import ProList from './components/ProList.vue'
</script>

<style lang="scss" >
.box{
    background: #ff974a;
  
       
        .top{
                display: flex;
                justify-content: space-around;
                margin-top: 5px;
        }
    
}
.left{
    width: 50px;
    height: 50px;
   
    .text{
        margin-top: -32px;
        font-size: 12px;
        color: #fff;
    }
    .icon{
        color: #fff;
    }

}
.img{
    width: 200px;
}
.search{
    border-radius: 20px;
}
.grid{
    background: #fff;
    margin-top: 10px;
    border-radius: 20px;
}
</style>